<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <!--    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>-->
    <!--    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
    <!--    <meta name="viewport" content="width=device-width, initial-scale=1">-->
    <!--    <link rel="stylesheet" type="text/css" href="css/base.css"/>-->
    <link rel="stylesheet" type="text/css" href="css/home.css"/>
    <!--    <link rel="stylesheet" type="text/css" href="city/city.css">-->
    <link rel="icon" href="http://wb.boqibao.com/favicon2.ico">
    <script type="text/javascript" src="script/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="script/home_ban.js"></script>
    <script type="text/javascript" src="script/eg_top_search.js"></script>
    <script type="text/javascript" src="script/city.js"></script>
    <script type="text/javascript" src="script/snncar.js"></script>

    <!--引入vue和Axios.js 先导入vue  再导入axios -->
    <script src="plugins/vue/dist/vue.js"></script>
    <script src="plugins/axios/dist/axios.js"></script>
    <script src="script/main.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        header {
            background-color: #333;
            color: white;
            padding: 1em;
            text-align: center;
        }

        nav {
            display: flex;
            justify-content: space-around;
            background-color: #444;
            padding: 1em;
        }

        nav a {
            color: white;
            text-decoration: none;
            padding: 0.5em 1em;
        }

        section {
            padding: 2em;
        }

        h2 {
            color: #333;
        }

        .user-info {
            display: flex;
            align-items: center;
            margin-bottom: 2em;
        }

        .user-info img {
            border-radius: 50%;
            margin-right: 1em;
        }

        .order-list {
            list-style: none;
            padding: 0;
        }

        .order {
            border: 1px solid #ddd;
            padding: 1em;
            margin-bottom: 1em;
            background-color: white;
        }

        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 1em;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="center">

    <header>
        <h1>个人中心</h1>
    </header>

    <nav>
        <a href="index.html">首页</a>
        <a href="goods.html">商品列表</a>
        <a href="order.html">订单中心</a>
    </nav>

    <section>
        <div class="user-info">
            <img v-bind:src="user.headImg" alt="User Avatar" width="50">
            <div>
                <p>用户名: {{user.username}}</p>
                <p>手机号: {{user.phone}}</p>
                <p>邮箱号: {{user.email}}</p>
            </div>
        </div>

        <div id="orders">
            <h2>我的订单</h2>
<!--            <ul class="order-list">-->

<!--                <li class="order" v-for="order in orders">-->

<!--                    <p>订单号: #{{order.oId}}</p>-->
<!--                    <p>商品: {{order.sId}}</p>-->
<!--                    <p>总价: ${{order.oType}}</p>-->
<!--                    <p>完成度: {{order.Completion}}</p>-->
<!--                </li>-->
<!--                &lt;!&ndash; More orders go here &ndash;&gt;-->
<!--            </ul>-->
            <div class="order-list">
                <div class="order" v-for="order in orders">
                    <p>订单号: #{{order.oid}}</p>
                    <p>商品: {{order.sid}}</p>
                    <p>总价: ${{order.otype}}</p>
                    <p>完成度: {{order.completion}}</p>
                </div>
            </div>
        </div>

<!--        <div id="profile">-->
<!--            <h2>个人资料</h2>-->
<!--            &lt;!&ndash; Form for updating user profile &ndash;&gt;-->
<!--        </div>-->

<!--        <div id="settings">-->
<!--            <h2>设置</h2>-->
<!--            &lt;!&ndash; Form for user settings &ndash;&gt;-->
<!--        </div>-->
    </section>

    <!--底部-->
<!--    <div class="ftWrap">-->
<!--        <div class="foot">-->
<!--            <div class="cent">-->
<!--                <div class="relate">-->
<!--                    <div class="items">-->
<!--                        <div class="tit"><i class="icon-angle-right"></i>交易帮助</div>-->
<!--                        <div class="con"><a href="#">帮助</a> <a href="#">帮助</a> <a href="#">帮助</a>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="items">-->
<!--                        <div class="tit"><i class="icon-angle-right"></i>客服中心</div>-->
<!--                        <div class="con">-->
<!--                            <a href="abut.html">网站合作</a>-->
<!--                            <a href="about.html">关于我们</a>-->
<!--                            <a href="contact.html">联系我们</a>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="items">-->
<!--                        <div class="tit"><i class="icon-angle-right"></i>购物指南</div>-->
<!--                        <div class="con"><a href="#">购物帮助</a></div>-->
<!--                    </div>-->
<!--                    <div class="app-section"><img class="js-delayed-img" src="images/f_wx.jpg">-->
<!--                        <div class="title">扫码关注微信</div>-->
<!--                        <p> 随时随地，秒杀好物<br/></p>-->
<!--                    </div>-->
<!--                    <div class="items last">-->
<!--                        <div class="tel">-->
<!--                            &lt;!&ndash;                            <h1>XXX</h1>&ndash;&gt;-->
<!--                            <p>周一至周日 8:00-18:00</p>-->
<!--                            <p>免费咨询(咨询、建议、投诉)</p>-->
<!--                            <a href="#" class="kf"><i class="kf-icon"></i>在线客服</a></div>-->
<!--                        <div class="tel-mb">-->
<!--                            <p><span>XXX</span>周一至周日 8:00-18:00(仅收市话费)</p>-->
<!--                            <a href="#" class="kf"><i class="kf-icon"></i>在线客服</a></div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="copyright">-->
<!--            <div class="cent"> Copyright © 2023,All Rights Reserved</div>-->
<!--        </div>-->
<!--    </div>-->
</div>

<script type="text/javascript">
    new Vue({
        el: "#center",
        data: {

            //用户名登录data
            user: {
                username: '',
                email: '',
                phone: '',
                headImg: ''
            },
            orders: []
        },

        methods: {

            // 获取当前用户的信息
            // getUserInfo() {
            //     var logininfoId = localStorage.getItem("loginUser");
            //     logininfoId = JSON.parse(logininfoId);
            //     this.$http.get("/user/" + logininfoId.id)
            //         .then(result => {
            //             result = result.data;
            //             if (result.success) {
            //                 this.user = result.resultObj;
            //             } else {
            //
            //             }
            //         }).catch(result => {
            //
            //     })
            // },


            // 获取当前用户的订单信息
            getOrderInfoByUserId() {
                var logininfoId = localStorage.getItem("loginUser");
                logininfoId = JSON.parse(logininfoId);
                this.$http.get("/order/info/" + logininfoId.id)
                    .then(result => {
                        result = result.data;
                        if (result.success) {
                            this.orders = result.resultObj;
                            console.log(this.orders)
                        } else {

                        }
                    }).catch(result => {

                })
            }

        },

        mounted() {

            // //如果localStorage已经有值，此时应该是登录状态
            // var loginUser = localStorage.getItem("loginUser");
            // if (loginUser) {
            //     loginUser = JSON.parse(loginUser);
            //     this.username = loginUser.username;
            //     //展示登出按钮
            //     $("#loginBefore").hide();
            //     $("#loginAfter").show();
            // }
            this.getUserInfo();
            this.getOrderInfoByUserId();
        }

    })
</script>

</body>
</html>
